<template>
  <div id="forget">
    <div class="head">
      <router-link class="return" to='/'><img src="../assets/return.png"></router-link>
      <span>找回密码</span>
      <div class="navigation" v-on:click="navigation();">
        <img src="../assets/navigation.png">
        <span>导航</span>
      </div>
    </div>
    <div class="nav" v-show="flag">
      <router-link class="homepage1" to="/">
        <img src="../assets/homepage.png">
        <span>首页</span>
      </router-link>
      <router-link class="mine1" to="mine">
        <img src="../assets/mine.png">
        <span>我的</span>
      </router-link>
      <router-link class="search1" to="search">
        <img src="../assets/search.png">
        <span>搜索</span>
      </router-link>
    </div>
  </div>
</template>

<script>
export default {
  name: 'forget',
  data () {
    return {
      flag: false
    }
  },
  methods: {
    navigation: function () {
      this.flag = !this.flag
    }
  }
}
</script>

<style scoped lang="scss">
  #login{
    width: 6.4rem;
    margin: 0 auto;
  }
  .head{
    display:flex;
    flex-direction: row;
    justify-content: space-between;
    align-content: center;
    margin: 0 ;
    padding: 0;
    width: 100%;
    height: 1rem;
    background-color: #06c1ae;
    border-bottom:1px solid #21897d;
    .return{
      img{
        display: block;
        width: .5rem;
        height: .5rem;
        margin: .25rem;
      }
    }
    span{
      font-size: .4rem;
      line-height: 1rem;
      color: #fff;
    }
    .navigation{
      display: flex;
      flex-direction: column;
      align-content: center;
      margin-right: .2rem;
      width: .6rem;
      img{
        display: block;
        width: .4rem;
        height: .4rem;
        margin: .1rem ;
      }
      span{
        display: block;
        line-height: .4rem;
        font-size: .2rem;
        text-align: center;
      }
    }
  }
  .nav{
    margin: .05rem .05rem 0 0;
    width: 2rem;
    height: 2.4rem;
    flex-direction: column;
    background-color: #06c1ae;
    opacity: 0.9;
    display: flex;
    position: absolute;
    right: 0;
    z-index: 5;
    .homepage1,.mine1, .search1{
      display: flex;
      border-bottom: 1px solid #21897d;
      text-align: center;
      font-size: .35rem;
      line-height: .8rem;
      color: #fff;
    }
    img{
      display: block;
      width: .4rem;
      height: .4rem;
      margin: .2rem;
    }
  }
</style>
